<template>
  <div>
    <!-- 标题 -->
    <el-card class="content scrollbar">
      <el-form class="search ml20" :inline="true" label-suffix="：" size="mini">
        <el-form-item label="角色名称">
          <!-- <el-select v-model="search.state " class="w100" clearable placeholder="全部状态">
            <el-option v-for="item in options.state" :key="item.id" :label="item.name" :value="item.id" />
          </el-select> -->
          <el-input
            v-model="search.name"
            class="w150"
            clearable
            placeholder="请输入角色名称"
            @keyup.enter.native="getList('search')"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList('search')">搜索
          </el-button>
          <!-- <el-button @click="searchReset">重置
          </el-button> -->
        </el-form-item>
        <el-form-item class="ml50">
          <el-button v-if="permission['001007012002']" type="primary" @click="detailBtn('新增',{})">新增
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="dragTable"
        v-loading="loading"
        :height="tableHeight"
        :data="list"
        size="small"
        :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass"
      >
        <ElTableColumn label="序号" type="index" width="50" />
        <ElTableColumn label="角色名" prop="name" />
        <!-- <ElTableColumn label="角色属性" prop="isHeadquarters" /> -->
        <!-- <ElTableColumn label="所属组织" prop="fitDepts" /> -->
        <ElTableColumn label="角色属性">
          <template slot-scope="{ row }">
            <span>{{ row.isHeadquarters?'总部':'院区' }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="所属组织">
          <template slot-scope="{ row }">
            <div v-if="row.deptName.length<=2">
              <span v-for="(item, index) in row.deptName" v-show="index<2" :key="item">{{ item + '，' }}</span>
              <span>{{ row.deptName.length>2?'...':'' }}</span>
            </div>
            <el-popover v-else placement="top-start" trigger="hover" :content="row.deptName.toString() ">
              <el-button slot="reference" size="mini" type="text">
                <span v-for="(item, index) in row.deptName" v-show="index<2" :key="item">{{ item + '，' }}</span>
                <span>{{ row.deptName.length>=2?'...':'' }}</span>
              </el-button>
            </el-popover>
          </template>
        </ElTableColumn>
        <ElTableColumn label="数据范围" prop="dataScope">
          <template scope="{row}">
            {{ dataScope[row.dataScope] }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" width="280">
          <template slot-scope="{ row }">
            <el-button v-if="permission['001007012005']" type="primary" size="mini" @click="copyBtn(row)">复制</el-button>
            <el-button
              v-if="permission['001007012001']"
              type="primary"
              size="mini"
              @click="detailBtn('详情',row)"
            >详情</el-button>
            <el-button
              v-if="permission['001007012003']"
              type="primary"
              size="mini"
              @click="detailBtn('修改',row)"
            >修改</el-button>
            <el-button v-if="permission['001007012004']" size="mini" @click="hint('del', '删除该账号', row)">删除</el-button>
          </template>
        </ElTableColumn>
      </el-table>
      <pagination
        class="page tc mt10"
        :total="page.total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getList"
      />
      <el-dialog v-dialogdrag :title="dialogTit" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%">
        <el-form
          class="search ml20"
          :inline="true"
          label-position="right"
          :rules="rules"
          label-width="140px"
          size="mini"
        >
          <el-form-item label="账号密码" prop="name">
            <el-input v-model="detail.name" class="w300" placeholder="请输入账号密码" />
          </el-form-item>
          <el-form-item label="重复输入密码" prop="name">
            <el-input v-model="detail.num" class="w300" placeholder="请重复输入密码" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>

</template>

<script>
import pagination from '@/components/Pagination';
import { rolesList, rolesDel, rolesCopy } from '@/api/role';
import index from '@/mixins/index';
import { mapGetters } from 'vuex';
class Page {
  total = 0;
  pageNum = 1;
  pageSize = 30;
}
class Search {
  name = '';
  // state = '';
}
class Detail {
  name = '';
  num = '';
}
class Rules {
  name = [{ required: true, message: '请填写名称', trigger: 'blur' }];
  num = [{ required: true, message: '请填写三方编码', trigger: 'blur' }];
}
class Options {
  options = [
    { id: 1, name: '选项一' },
    { id: 2, name: '选项二' },
    { id: 3, name: '选项三' },
    { id: 4, name: '选项四' }
  ];
  // state = [
  //   { id: 1, name: '启用' },
  //   { id: 0, name: '禁用' }
  // ];
}
export default {
  components: {
    pagination

  },
  mixins: [index],
  data() {
    return {
      search: new Search(), // 检索条件
      options: new Options(), // 选项
      page: new Page(), // 分页
      detail: new Detail(), // 提交信息
      rules: new Rules(), // 验证
      searchTime: [], // 创建日期
      dialogVisible: false, // 加载样式
      name: '', // 类型名称
      dialogTit: '', // 弹窗名称
      loading: false,
      list: [], // 列表
      dataScope: ['全组织', '本部门和下级部门', '本部门', '本人和下级部门', '特定部门', '本人'],
      tableHeight: 200
    };
  },
  computed: {
    ...mapGetters(['permission'])
  },

  mounted() {
    this.getSearchQuery('search');
    this.getList();
    // 初始化表格高度
    this.$nextTick(() => {
      this.initTableHeight();
    });
    window.addEventListener('resize', this.initTableHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initTableHeight);
  },
  methods: {
    // 初始化表格高度
    initTableHeight() {
      if (!this.$refs.dragTable) {
        this.$nextTick(() => {
          this.initTableHeight();
        });
        return;
      }
      const tableHeight = window.innerHeight - this.$refs.dragTable.$el.getBoundingClientRect().top - 70;
      this.tableHeight = Math.max(tableHeight, 200);
    },
    async getList() {
      this.setSearchQuery('search');
      this.loading = true;
      try {
        const { data } = await rolesList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
          isDrugSystem: 1,
          ...this.search
        });
        this.list = data.list;
        this.page.total = data.total;
        this.list.forEach(item => {
          item['deptName'] = [];
          item.deptNames.forEach(val => {
            item.deptName.push(val);
          });
        });
        this.loading = false;
      } catch (e) {
        this.page.total = 0;
        this.list = [];
        this.loading = false;
      }
    },
    // 搜索重置
    searchReset() {
      this.search = new Search();
      this.searchTime = [];
      this.getList();
    },
    // 创建时间
    changeDateRange(val) {
      this.search.start_time = val ? val[0] : '';
      this.search.end_time = val ? val[1] : '';
    },
    // 详情跳转
    detailBtn(nameType, row) {
      this.$router.push({
        path: '/jurisdiction/role/detail',
        query: { nameType: nameType, id: row.id, isHeadquarters: row.isHeadquarters }
      });
    },
    // 复制接口
    async copyBtn(row) {
      // console.log(row);
      const res = await rolesCopy({
        id: row.id
      });
      this.$notification('操作成功', 'success', res.msg);
      this.getList();
    },

    // 确认提示
    hint(status, hintText, row) {
      this.$confirm(`${hintText}, 是否确认?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          switch (status) {
            case 'del':
              this.delRow(row);
              break;
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },

    async delRow(row) {
      const res = await rolesDel({
        id: row.id
      });
      this.$notification('操作成功', 'success', res.msg);
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  // height: calc(100% - 56px);
  // overflow-y: hidden;
  // height: 85vh;
  ::v-deep img {
    width: 50px;
    border-radius: 4px;
    margin-top: 6px;
  }
}
.content:hover {
  overflow-y: auto;
}
</style>
